<template>
  <div class="child-box">
    <div class="child-lis" v-for="(item,index) in data.SubQuesList" :key="index">
      <div>
        <div style="width: calc(100% - 120px);display: inline-block;margin-top: 5px;">
          <span class="child-lis-type" v-if="isShowQuesType">
            {{index+1}}.
            <label v-if="item.SubQuestionType == 1">单选题</label>
            <label v-if="item.SubQuestionType == 2">多选题</label>
            <label v-if="item.SubQuestionType == 3">判断题</label>
            <label v-if="item.SubQuestionType == 6">问答题</label>
          </span>
          <span class="child-lis-span" v-if="isShowBaseScore">({{item.SubScore}}分)</span>
          <span v-html="item.Title" style="display: inline-block;width: calc(100% - 63px);margin-left: 5px;vertical-align: top;"></span>
        </div>
        <div style="display: inline-block;vertical-align: top;" v-if="mode == 'check' && isShowScore && data.IsAssignmented">
          <a-input-number
            style="color: #f00;"
            :disabled=" mode == 'check'"
            :min="0"
            :max="item.SubScore"
            v-model="item.StuDo.GetScore"
          />
          <span style="margin-left: 5px;font-size: 16px;">分</span>
        </div>
      </div>
      <addUploads v-if="item.quesFileList" :quesFileList="item.quesFileList" :mode="false"></addUploads>
      <!-- 单选题 -->
      <div class="child-option" v-if="item.SubQuestionType == 1 && itemShow">
        <a-radio-group
          :disabled=" mode == 'check'"
          style="width: 100%;"
          v-model="answerList[index]"
          @change="onChange(index)"
        >
          <a-radio
            class="option-lis"
            style="display: block;lineHeight: 30px;"
            v-for="(value,key) in item.AnswerList"
            :value="value.SortOrder"
            :key="key"
          >
            {{Alphabet[key]}}.
            <span v-html="value.Content" class="option-lis-title"></span>
          </a-radio>
        </a-radio-group>
      </div>
      <div class="child-option" v-if="item.SubQuestionType == 1 && !itemShow">
        <a-radio-group
          :disabled="true"
          class="radio-check-disabled"
          style="width: 100%;"
          :value="answerAll(allAnswerList[index],index)"
          @change="onChange(index)"
        >
          <a-radio
            class="option-lis"
            style="display: block;lineHeight: 30px;"
            v-for="(value,key) in item.AnswerList"
            :value="value.SortOrder"
            :key="key"
          >
            {{Alphabet[key]}}.
            <span v-html="value.Content" class="option-lis-title"></span>
          </a-radio>
        </a-radio-group>
      </div>
      <!-- 多选题 -->
      <div class="child-option" v-if="item.SubQuestionType == 2 && itemShow">
        <a-checkbox-group :disabled=" mode == 'check'" v-model="answerList[index]" @change="onChange(index)">
          <a-checkbox
            class="option-lis"
            style="display: block;lineHeight: 30px;"
            v-for="(value,key) in item.AnswerList"
            :value="value.SortOrder"
            :key="key"
          >
            {{Alphabet[key]}}.
            <span v-html="value.Content" class="option-lis-title"></span>
          </a-checkbox>
        </a-checkbox-group>
      </div>
      <div class="child-option" v-if="item.SubQuestionType == 2 && !itemShow">
        <a-checkbox-group :disabled="true" class="radio-check-disabled" :value="answerAll(allAnswerList[index],index)" @change="onChange(index)">
          <a-checkbox
            class="option-lis"
            style="display: block;lineHeight: 30px;"
            v-for="(value,key) in item.AnswerList"
            :value="value.SortOrder"
            :key="key"
          >
            {{Alphabet[key]}}.
            <span v-html="value.Content" class="option-lis-title"></span>
          </a-checkbox>
        </a-checkbox-group>
      </div>
      <!-- 判断题 -->
      <div class="child-option" v-if="item.SubQuestionType == 3 && itemShow" >
        <a-radio-group
          :disabled=" mode == 'check'"
          style="width: 100%;"
          v-model="answerList[index]"
          @change="onChange(index)"
        >
          <a-radio
            class="option-lis"
            style="display: block;height: 30px;lineHeight: 30px;"
            :value="1"
          >
            {{Alphabet[0]}}.
            <span>正确</span>
          </a-radio>
          <a-radio
            class="option-lis"
            style="display: block;height: 30px;lineHeight: 30px;"
            :value="0"
          >
            {{Alphabet[1]}}.
            <span>错误</span>
          </a-radio>
        </a-radio-group>
      </div>
      <div class="child-option" v-if="item.SubQuestionType == 3 && !itemShow" >
        <a-radio-group
          :disabled="true"
          style="width: 100%;"
          :value="answerAll(allAnswerList[index],index)"
          @change="onChange(index)"
        >
          <a-radio
            class="option-lis"
            style="display: block;height: 30px;lineHeight: 30px;"
            :value="1"
          >
            {{Alphabet[0]}}.
            <span>正确</span>
          </a-radio>
          <a-radio
            class="option-lis"
            style="display: block;height: 30px;lineHeight: 30px;"
            :value="0"
          >
            {{Alphabet[1]}}.
            <span>错误</span>
          </a-radio>
        </a-radio-group>
      </div>
      <!-- 问答题 -->
      <div class="child-option" v-if="item.SubQuestionType == 6" >
        <a-textarea
          :disabled=" mode == 'check'"
          v-model="item.StuDo.Answer"
          :index="index"
          placeholder="请输入答案"
          @blur="onChange(index)"
          :rows="4"
        />
        <a-button type="primary" @blur="onChange(index)" style="margin-top: 10px;" v-if="mode != 'check'">
          保存
        </a-button>
        <!-- <div v-if="mode != 'check'"> -->
          <uploads
            v-if="item.fileList&&item.fileList.length>0 || uploadType === 1"
            :examId="examId"
            :workExamStuId="workExamStuId"
            :index="index"
            :data="item"
            :mode="btnShow"
          ></uploads>
        <!-- </div> -->
      </div>
      <div v-if="mode == 'check'">
        <div
          v-if="item.SubQuestionType != 8 && item.SubQuestionType != 9 && item.SubQuestionType != 11 && item.SubQuestionType != 12 && item.SubQuestionType != 13 && isShowAnswer"
        >
          <div class="question-label">参考答案：</div>
          <div class="question-input" v-if="item.SubQuestionType == 6">
            <span v-html="item.SubStuAnswer"></span>
          </div>
          <div class="question-input" v-else>{{item | getSetAnswer}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import addUploads from '@/components/addTi/addUpload/index.vue';
import uploads from '@/components/addTi/upload/index.vue';
export default {
  data() {
    return {
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      value: '',
      // answerList: [],
      btnShow: false
    };
  },
  components: {
    addUploads,
    uploads
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    },
    allAnswerList: {
      type: Array,
      default: () => []
    },
    mode: {
      type: String,
      default: ''
    },
    examId: {
      type: String,
      default: ''
    },
    workExamStuId: {
      type: String,
      default: ''
    },
    uploadType: {
      type: Number,
      default: 0
    },
    isShowAnswer: {
      type: Boolean,
      default: false
    },
    isShowScore: {
      type: Boolean,
      default: false
    },
    isShowQuesType: {
      type: Boolean,
      default: false
    },
    isShowBaseScore: {
      type: Boolean,
      default: false
    },
    itemShow: {
      type: Boolean,
      default: true
    },
    answerList: {
      type: Array,
      default: () => []
    }
  },
  filters: {
    getSetAnswer(e) {
      var Alphabet = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ];
      if (e.SubQuestionType == 1) {
        return Alphabet[Number(e.SubStuAnswer)];
      }else if(e.SubQuestionType == 3){
        return e.SubStuAnswer == '1'?'正确':'错误'
      } else if (e.SubQuestionType == 2 || e.SubQuestionType == 7) {
        let answer = e.SubStuAnswer.split(',').map(Number);
        let answertxt = '';
        var min;
        if (e.SubQuestionType == 2) {
          for (var i = 0; i < answer.length; i++) {
            for (var j = i; j < answer.length; j++) {
              if (answer[i] > answer[j]) {
                min = answer[j];
                answer[j] = answer[i];
                answer[i] = min;
              }
            }
          }
        }
        for (let i = 0; i < answer.length; i++) {
          if (i == 0) {
            answertxt = Alphabet[answer[i]];
          } else {
            answertxt = answertxt + '、' + Alphabet[answer[i]];
          }
        }
        return answertxt;
      } else {
        return '暂无答案';
      }
    }
  },
  mounted() {
    // this.setAnswer();
    if (this.mode != 'check'&& this.uploadType === 1) {
      this.btnShow = true
    }
  },
  methods: {
    answerAll(e,index) {
      if (this.data.SubQuesList[index].SubQuestionType == 1 || this.data.SubQuesList[index].SubQuestionType == 3) {
        // if (e.questionJson || e.questionJson == 0) {
        //   return Number(e.questionJson);
        // } else {
        //   return e.questionJson;
        // }
        if (e.questionJson == '' || e.questionJson == null) {
          return ''
        } else {
          return Number(e.questionJson);
        }
      } else if (this.data.SubQuesList[index].SubQuestionType == 2) {
        if (e.questionJson == '' || e.questionJson == null) {
          return ''
        } else {
          return e.questionJson.split(',').map(Number);
        }
      }
    },
    setExamAnswer(data) {
      if (this.data.SubQuesList[data.childnum].SubQuestionType == 1 || this.data.SubQuesList[data.childnum].SubQuestionType == 3) {
        if (data.answer || data.answer == 0) {
          this.answerList[data.childnum] = Number(data.answer);
        } else {
          this.answerList[data.childnum] = data.answer;
        }
      } else if (this.data.SubQuesList[data.childnum].SubQuestionType == 2) {
        if (data.answer == '' || data.answer == null) {
          this.answerList[data.childnum] = '';
        } else {
          this.answerList[data.childnum] = data.answer.split(',').map(Number);
        }
      }
      this.setItemShow();
    },
    setAnswer() {
      this.loading = true;
      for (let i = 0; i < this.data.SubQuesList.length; i++) {
        let answer = '';
        if (this.data.SubQuesList[i].SubQuestionType == 1 || this.data.SubQuesList[i].SubQuestionType == 3) {
          if (this.data.SubQuesList[i].StuDo) {
            if (this.data.SubQuesList[i].StuDo?.Answer == '' || this.data.SubQuesList[i].StuDo?.Answer == null) {
              answer = '';
            } else {
              answer = Number(this.data.SubQuesList[i].StuDo.Answer);
            }
          } else {
            answer = '';
          }
        } else if (this.data.SubQuesList[i].SubQuestionType == 2) {
          if (this.data.SubQuesList[i].StuDo?.Answer == '' || this.data.SubQuesList[i].StuDo?.Answer == null) {
            answer = [];
          } else {
            answer = this.data.SubQuesList[i].StuDo.Answer.split(',').map(Number);
          }
        }
        this.answerList.push(answer);
      }
      this.loading = false;
    },
    onChange(index) {
      if (this.data.SubQuesList[index].SubQuestionType == 1 || this.data.SubQuesList[index].SubQuestionType == 3) {
        this.data.SubQuesList[index].StuDo.Answer = String(this.answerList[index]);
      } else if (this.data.SubQuesList[index].SubQuestionType == 2) {
        this.data.SubQuesList[index].StuDo.Answer = this.answerList[index].toString();
      }
      // this.answerList[index] = '';
      this.$parent.onChange(this.data, this.index, index);
    }
  }
};
</script>

<style>
</style>